<template>
  <div>
    <div class="form-container">
      <el-steps simple :active="2" finish-status="success">
        <el-step title="填写基本信息"></el-step>
        <el-step title="实名认证"></el-step>
        <el-step title="业务授权"></el-step>
        <el-step title="关联对公账户"></el-step>
        <el-step title="注册成功"></el-step>
      </el-steps>
      <v-form-title title="上传证件"/>
      <div class="tips"><i class="iconfont icon-tishi"></i> 授权企业员工在“兴业执剑人见证代管系统”办理资金查询、提现及充值等操作，同时授权为电子合同办理人员。
      </div>

      <el-form :model="form" ref="form" label-width="200px" label-position="right" :rules="rules">
        <el-form-item prop="images" label="经办人证照">
          <v-unit-auth-images v-model="form.images" :images="images" @managerPhotoFrontOcr="managerPhotoFront"/>
        </el-form-item>
        <el-form-item prop="managerName" label="经办人姓名">
          <el-input class="line-input" v-model="form.managerName" placeholder="请输入经办人姓名"></el-input>
        </el-form-item>
        <el-form-item prop="managerPhoneNumber" label="经办人手机号">
          <el-input class="line-input" maxlength="11" v-model="form.managerPhoneNumber"
                    placeholder="请输入经办人手机号"></el-input>
        </el-form-item>
        <el-form-item prop="managerIdNumber" label="经办人身份证号">
          <el-input class="line-input" v-model="form.managerIdNumber" placeholder="请输入经办人身份证号"></el-input>
        </el-form-item>
      </el-form>
      <v-form-title title="签订授权委托书"/>
      <el-checkbox-group v-model="form.managerAgreement" class="agent-el-check">
        <span>
          <el-checkbox name="managerAgreement" label="1" v-model="form.enterpriseProxyAgree">签订</el-checkbox>
          <el-button type="text" @click="readProxyAgree(true)">《企业授权委托书》</el-button>
        </span>
        <span>
          <el-checkbox name="managerAgreement" label="2" v-model="form.authorizationCertAgree">签订</el-checkbox>
          <el-button type="text" @click="readProxyAgree(false)">《单位授权书》</el-button>
        </span>
      </el-checkbox-group>

      <p class="tips">点击签订《企业授权委托书》、《单位授权书》后可以继续下一步操作。</p>
    </div>
    <v-enter-dailog ref="enter-dailog" :userInfo="userInfo" :nowDate="nowDate"/>
    <v-author-dailog ref="author-dailog" :userInfo="userInfo" :nowDate="nowDate"/>
    <div class="operation">
      <el-button type="primary" @click="valid">填写完毕下一步</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import { Action } from 'vuex-class'

  import vUnitAuthImages from '@/components/unit-auth-images'
  import vFormTitle from '@/components/form-title'
  import vEnterDailog from '~/pages/user-center/auth/enterpriseAgree'
  import vAuthorDailog from '~/pages/user-center/auth/authorAgree'

  @Component({
    components: {
      vUnitAuthImages,
      vFormTitle,
      vEnterDailog,
      vAuthorDailog
    }
  })
  export default class Step1 extends Vue {
    nowDate = {}
    userInfo = {}
    @Action getPolicy
    images = [
      {
        key: 'managerPhotoFront',
        src: '',
        managerName: '身份证正面',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/61afb7a6-904b-43fe-93f3-efc4f713cf08.png'
      },
      {
        key: 'managerPhotoBack',
        src: '',
        managerName: '背面',
        placeholder: 'https://hpx-boss.oss-cn-qingdao.aliyuncs.com/f730fa6a-ca7b-4a57-9944-40b3c861fe29.png'
      }
    ]
    form = {
      managerName: '',
      managerIdNumber: '',
      managerPhoneNumber: '',
      images: [],
      managerAgreement: [],
      enterpriseProxyAgree: '1',
      authorizationCertAgree: '1'
    }
    rules = {
      images: [{ type: 'array', required: true, message: '请上传相应的图片', trigger: 'change', len: 2 }],
      managerName: [{ required: true, message: '请输入经办人证件号码', trigger: 'blur' }],
      managerIdNumber: [{ required: true, message: '请输入经办人证件号码', trigger: 'blur' }],
      managerPhoneNumber: [
        { required: true, message: '请输入经办人手机号', trigger: 'blur' },
        {
          pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
          message: '手机号码错误',
          trigger: 'blur'
        }
      ],
      managerAgreement: [
          {type: 'array', required: true, message: '请同意签订协议', trigger: 'change', len: 2}
      ]
    }

    async getNowDate () {
        let res: AjaxResponse = await  this.$axios.get('g/gateway/basic/nowdate')
        this.nowDate = res.data
    }
    async getEnterprise() {
      let enterpriseUserId = JSON.parse(window.localStorage.getItem('invite')).enterpriseUserId
      if(enterpriseUserId != null){
        let resEnterprise: AjaxResponse = await this.$axios.post('g/gateway/member/info',{enterpriseUserId: enterpriseUserId})
        this.userInfo = resEnterprise.data
      }
      // console.log()
      //let resEnterprise: AjaxResponse = await this.$axios.get(`g/gateway/member/${enterpriseUserId}`)
      //this.userInfo = resEnterprise.data
    }

    //企业授权委托书
    readProxyAgree (way) {
        console.log(way)


        if(way){
            this.$refs['enter-dailog'].openDialog()
        }else{
            this.$refs['author-dailog'].openDialog()
        }
    }

    valid () {
      this.$refs.form.validate(valid => {
        if (valid) {
          let f = { ...this.form }
          f.images.forEach(v => {
            f[v.key] = v.src
          })
          delete  f.images
          this.post(f)
        }
      })
    }

    async managerPhotoFront (imageUrl) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/ocr/idcard', {
        faceOrBack: 'face',
        imageUrl
      })
      if (res.responseCode === 200) {
        this.form.managerName = res.data.name
        this.form.managerIdNumber = res.data.id_num
      }
    }

    async post (form) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/member/businessauthorization', {
        ...form,
        enterpriseUserId: JSON.parse(window.localStorage.getItem('invite')).enterpriseUserId
      })
      this.$utils.tips(res)
      this.$router.push('/register/step-3')
    }

    mounted () {
      console.log(this.userInfo)
      this.getPolicy()
      this.getNowDate()
      this.getEnterprise()
    }
  }
</script>
<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    .el-button {
      margin: 30px 0;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }

  .tips {
    background: #F2F6F9;
    color: #999999;
    padding-left: 10px;
    line-height: 24px;
    margin-bottom: 20px;
    .iconfont {
      color: #F55205;
    }
  }

  .img-box {
    justify-content: space-around;
  }

  .signature {
    display: flex;
    font-size: 14px;
    text-align: center;
    span {
      flex: 1;
    }
  }
  .agent-el-check {
    text-align: center;
  }
</style>
